<template>
  <div class="videoPage">
    <!-- 1.顶部导航栏 -->
    <Nav :data="{ name: '南小睿的会议录音0701', time: '2023年7月1日 上午8:09' }" />
    <!-- 2. 视频播放 -->
    <div class="videoPlayer">
      <!-- <video id="media" src="@/assets/3copy.mp4" controls >
            <source src="@/assets/新录音.mp4" type="video/mp4">
        </video> -->
      <!-- <video class="video-js" id="my-player">
        <source :src="videoSrc" type="video/mp4" />
      </video> -->
      <div id="video-player">
        <!-- <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
          <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
          <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
          <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />
          <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" /> -->
        <track src="/2.vtt" kind="subtitles" srclang="en" label="English" />
        <!-- <track src="subtitles_no.vtt" kind="subtitles" srclang="no"
          label="Norwegian"> -->
      </div>
    </div>
    <!-- 3.文字记录/搜索 -->
    <div class="top">
      <h3>文字记录</h3>
      <div class="search">
        <el-input
          v-model="inputValue"
          class="w-50 m-2"
          placeholder="搜索"
          :prefix-icon="Search"
          @input="inputChange"
        />
      </div>
    </div>
    <!-- 4.文字记录信息 -->
    <div class="transcriptionRecord">
      <el-scrollbar height="calc(100vh - 261px)">
        <div class="recordinfo" v-for="(item, i) in 3" :key="i">
          <!-- 1.左侧 -->
          <div class="left"><div>南南</div></div>
          <!-- 2.右侧 -->
          <div class="right">
            <!-- 2.1 上层 -->
            <div class="right-top">
              <span>南南</span>
              <span>00:02</span>
            </div>
            <!-- 2.2 文字转写内容 -->
            <div class="right-bottom">
              大家好，欢迎来到会议瑞记。会议瑞记是一款音视频转文字的效率工具。接下来请跟我一起解锁会议瑞记的使用方法吧。接下来请跟我一起解锁会议瑞记的使用方法吧。接下来请跟我一起解锁会议瑞记的使用方法吧。接下来请跟我一起解锁会议瑞记的使用方法吧。接下来请跟我一起解锁会议瑞记的使用方法吧。
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import Nav from '@/components/Nav.vue'
import { ref, reactive, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
// import videoSrc from "@/assets/新录音_0822.mp3"
import videoSrc from '@/assets/4.mp4'
// import vttSrc from "@/assets/2.vtt"

import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import Danmu from 'xgplayer/es/plugins/danmu'
import 'xgplayer/es/plugins/danmu/index.css'
// import from ""
onMounted(() => {
  //初始化视频播放器
  initPlayer()

  // const  video = document.querySelector("video").textTracks;
  // let track = video.addTextTrack("captions", "Captions", "en");
  // track.mode = "showing";
  // for (const track of tracks) {
  //   if (track.language === "en") {
  //     console.dir(track);
  //   }
  // }
})
const isAppleDevice = () => {
  const ua = navigator.userAgent.toLowerCase()
  return /iphone|ipad|phone|Mac/i.test(ua)
}
const initPlayer = () => {
  const config = {
    id: 'video-player',
    url: videoSrc,
    poster: '', //缩略图
    fluid: true, //流动布局：播放器的宽度根据父元素的宽度变化而变化
    lang: 'zh-cn', //设置中文
    volumn: 1,
    playbackRate: [0.5, 0.75, 1, 1.5, 2], //倍速
    // defaultPlaybackRate: 1,  //默认播放速率
    playsinline: isAppleDevice(), // IOS设备设置，防止被浏览器劫持
    'x5-video-player-type': 'h5', // 微信内置浏览器设置，防止被浏览器劫持
    'x5-video-orientation': 'portraint',
    // pip: true,  //画中画
    // pipConfig: {
    //   bottom: 100,
    //   right: 100,
    //   width: 320,
    //   height: 180
    // },
    // download: true,  //下载
    videoInit: false, //初始化首帧/该配置在移动端无效 | 与autoplay配置项不可同时设置为true
    autoplay: true,
    startTime: '5', //播放器开始播放时间
    marginControls: false, //分别渲染控制栏(控制栏始终为黑色)和媒体元素
    enableContextmenu: true,
    cssFullscreen: false, // 页面中全屏
    // icons: {           //图标
    //   play: MyPlayIcon,
    //   pause: MyPauseIcon
    // }，
    initShow: true, //播放器初始化时就显示控制栏
    // tan
    plugins: [TextTrack],
    // 菜单控件
    // controlPlugins: [
    //     volumn,
    //     // volume,// 音量按钮 移动端不推荐显示该按钮，原因：有点多余
    //     playbackRate,//倍速
    //     // download,//设置download控件显示
    //     // playNext,//下一集视频按钮
    //     // pip,//画中画
    //     // miniplayer,// 迷你播放器控件
    //     cssFullscreen,//竖屏全屏
    //     // screenShot,//截屏

    // 字幕
    textTrack: [
      {
        src: '/2.vtt',
        kind: 'subtitles',
        label: '字幕1',
        srclang: 'zh',
        default: true
      }
      // {
      //   src: "./textTrack-2.vtt",
      //   kind: "subtitles",
      //   label: "字幕2",
      //   srclang: "en",
      //   default: false
      // }
    ],
    textTrackStyle: {
      'background-color': 'red',
      color: '#fff',
      'font-size': '26px'
    }
    // textTrackActive: 'click'
  }
  const player = new Player(config)
  if (player) {
    player.on('play', () => {
      // $emit('triggerEvent', true)
    })
    player.on('pause', () => {
      // $emit('triggerEvent', false)
    })
    player.on('exitFullscreen', () => {
      window.scrollTo(0, 0)
    })
  }
}

// 搜索框
const inputValue = ref('')
// 防抖
function debounce(func, wait, immediate) {
  let timeout
  return function () {
    let context = this
    let args = arguments
    if (timeout) {
      clearTimeout(timeout)
    }
    if (immediate) {
      let callNow = !timeout
      timeout = setTimeout(() => {
        timeout = null
      }, wait)
      if (callNow) {
        typeof func === 'function' && func.apply(context, args)
      }
    } else {
      timeout = setTimeout(() => {
        typeof func === 'function' && func.apply(context, args)
      }, wait)
    }
  }
}
// 搜索框输入内容变化，搜索
const inputChangeFn = () => {
  console.log(inputValue.value)
  // debugger
  if (inputValue.value != '') {
  }
}
const inputChange = debounce(inputChangeFn, 300, false)
</script>

<style lang="less" scoped>
.videoPage {
  // margin: 0 62px;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;

  // 1.音频播放
  .videoPlayer {
    // height: 422px;
    display: flex;
    flex: none;
    #video-player {
      width: 750px !important;
      height: 422px !important;
      margin: 0 auto !important;

      // .xgplayer.not-allow-autoplay .xgplayer-controls, .xgplayer.xgplayer-nostart .xgplayer-controls, .xgplayer.xgplayer-inactive .controls-autohide{
      //   opacity: 1!important;
      //   display: block!important;
      //   visibility: visible!important;
      // }
      .xgplayer .xgplayer-start {
        opacity: 0 !important;
        .xg-icon-play {
          opacity: 0 !important;
        }
      }
    }
  }
  // 3.文字记录/搜索
  .top {
    height: 77px;
    border-top: 1px solid rgba(217, 217, 217, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
    .search {
      width: 240px;
      height: 34px;
      border-radius: 2px;
      color: rgba(206, 206, 206, 1);
      font-size: 14px;
      text-align: left;
      font-family: Roboto;
    }
  }

  // 4.文字记录信息
  .transcriptionRecord {
    display: flex;
    flex-direction: column;
    flex: none;

    .recordinfo {
      display: flex;
      justify-content: flex-start;
      //1.左侧
      .left {
        width: 34px;
        height: 34px;
        line-height: 34px;
        border-radius: 50%;
        background: linear-gradient(180deg, rgba(92, 219, 211, 1) 0%, rgba(19, 194, 194, 1) 100%);
        color: rgba(255, 255, 255, 1);
        font-size: 12px;
        margin-right: 8px;
        text-align: center;
        font-family: Microsoft Yahei;
        flex: none;
      }
      // 2.右侧
      .right {
        .right-top {
          & > span {
            width: 28px;
            height: 20px;
            color: rgba(145, 145, 145, 1);
            font-size: 14px;
            text-align: left;
            font-family: PingFangSC-regular;
            margin-right: 4px;
          }
          & > span:nth-child(2) {
            font-size: 12px;
          }
        }
        .right-bottom {
          // height: 48px;
          color: rgba(64, 64, 64, 1);
          font-size: 14px;
          text-align: left;
          font-family: SourceHanSansSC-regular;
        }
      }
    }
  }
}
</style>
